<script setup>
import { ref, watch, computed } from 'vue'
import stepTab from '../component/stepTab'
import baseInfo from '../component/baseInfo'
import earlyStageProcedure from '../component/earlyStageProcedure'
import projectDesign from '../component/projectDesign'
import preliminaryProcedure from '../component/preliminaryProcedure'
import projectImply from '../component/projectImply'
import projectSettlement from '../component/projectSettlement'
// import recordHistory from '../component/recordHistory'
import Breadcrumb from '@/components/breadcrumb/index'
import { useRoute, useRouter } from 'vue-router/composables'
import shenheHistory from '@/components/checkHistory/shenheHistory.vue'
import shenhe from './shenhe.vue'
import { isAdmin } from '@/utils/permission/index'
import {
  getProjectRecordDetail,
  submitRecordCheck,
  saveFile
} from '@/api/projectRecord'
import { getActiveName } from '../projectMethods'
const test = ref(null)
const shenheDialog = ref(null)
const route = useRoute()
const router = useRouter()
const type = ref(route.query.type)
const pkid = ref(route.query.pkid)
const status = ref(route.query.status)
const defaultIndex = ref(route.query.defaultIndex)
const isShowHistory = ref(false)
const steps = ref([
  '前期手续',
  '项目设计',
  '项目招标',
  '项目实施',
  '项目结算、决算'
])
const currentTab = ref(
  Number(
    route.query?.defaultIndex ? route.query.defaultIndex : 0
  )
)
const userRoleAdmin = ref(isAdmin())
const saveForm = ref({
  pkid,
  stage: getActiveName(currentTab.value),
  projecClFileVoList: []
})
watch(
  saveForm,
  (newV, oldV) => {
    console.log('saveForm更改了', newV)
    // detailData.value = {}
    // getDetail(pkid.value, getActiveName(newV))
  },
  { deep: true }
)
const isDefaultTab = computed(
  () => currentTab.value == Number(route.query.defaultIndex)
)
watch(
  isDefaultTab,
  (newV, oldV) => {
    console.log(newV)
  },
  { immediate: true }
)
const detailData = ref({ projectRecordCheckPoList: [{}] })
const isShow = ref(false)
const canDaoChu = ref(false)
const getDetail = function (pkid, stage) {
  const result = {}
  getProjectRecordDetail({ pkid, stage })
    .then((res) => {
      detailData.value = res.data
    })
    .catch((err) => {
      console.log(err)
    })
}
getDetail(pkid.value, getActiveName(currentTab.value))
const titles = ref([steps.value[currentTab.value]])
const changeItem = (item, index) => {
  currentTab.value = index
  titles.value = [item]
}
watch(currentTab, (newV, oldV) => {
  // console.log('currentTab更改了', newV)
  detailData.value = {}
  isShow.value = false
  getDetail(pkid.value, getActiveName(newV))
})
watch(detailData, (newV, oldV) => {
  // console.log('detailData更改了', newV.project)
  // 给detailData默认添加name来回显
  if (!newV.projectClPoList) {
    return
  }
  if (
    newV.projectClPoList.find(
      (item) => item.projectClFilePoList.length !== 0
    )
  ) {
    //有附件，可以导出
    canDaoChu.value = true
  } else {
    canDaoChu.value = false
  }
  for (let i = 0; i < newV.projectClPoList.length; i++) {
    for (const key2 in newV.projectClPoList[i]
      .projectClFilePoList) {
      newV.projectClPoList[i].projectClFilePoList[
        key2
      ].name =
        newV.projectClPoList[i].projectClFilePoList[
          key2
        ].fileName
    }
  }
  console.log('detailData改变了', newV)
  if (newV.project) {
    console.log('展示')
    isShow.value = true
  } else {
    console.log('不展示')
    isShow.value = false
  }
})
const changeFile = (data) => {
  console.log('父组件获得了值', data)
  saveForm.value.projecClFileVoList =
    data.projectClPoList.map((item) => {
      return {
        clId: item.pkid,
        fileIdList: item.projectClFilePoList.map(
          (item2) => item2.fileId
        )
      }
    })
}
const saveFileContent = (data) => {
  console.log('保存', data)
  saveFile(saveForm.value)
    .then((res) => {
      console.log(router)
      router.back()
    })
    .catch((err) => {
      console.log(err)
    })
}
const sumbit = function () {
  console.log('提交')
  const params = {
    pkid: pkid.value,
    stage: detailData.value.projectClPoList[0].stage
  }
  saveFile(saveForm.value)
    .then((res) => {
      console.log(router)
      submitRecordCheck(params)
        .then((res) => {
          console.log(res)
          router.back()
        })
        .catch((err) => {
          console.log(err)
        })
    })
    .catch((err) => {
      console.log(err)
    })
}
const handleShenHe = () => {
  console.log(detailData)
  if (
    detailData.value.projectRecordCheckPoList.length == 0
  ) {
    return
  }
  test.value.openDialog()
  // isShowHistory.value = true
  console.log('isShowHistory')
}
const clickShenhe = () => {
  // console.log(document.getElementById('shenheDialog'))
  // console.log()
  console.log(shenheDialog.value.changeDialog)
  console.log(detailData)
  console.log(getActiveName(currentTab.value))
  // test.value.handleOpen()
  shenheDialog.value.changeDialog(
    detailData,
    getActiveName(currentTab.value)
  )
}
</script>
<template>
  <div class="form-wrap">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="step-tab">
      <stepTab
        :items="steps"
        @changeItem="changeItem"
      ></stepTab>
    </div>
    <div class="base-info">
      <baseInfo :detailData="detailData"></baseInfo>
    </div>
    <div class="table-content" v-loading="!isShow">
      <!-- 前期手续 -->
      <earlyStageProcedure
        v-if="currentTab === 0 && isShow"
        :detailData="detailData"
        :pkid="pkid"
        :type="type"
        @changeFile="changeFile"
        :isDefaultTab="isDefaultTab"
        :canDaoChu="canDaoChu"
      ></earlyStageProcedure>
      <!-- 项目设计 -->
      <projectDesign
        v-if="currentTab === 1 && isShow"
        :detailData="detailData"
        :pkid="pkid"
        :type="type"
        @changeFile="changeFile"
        :isDefaultTab="isDefaultTab"
        :canDaoChu="canDaoChu"
      ></projectDesign>
      <!-- 项目招标 -->
      <preliminaryProcedure
        v-if="currentTab === 2 && isShow"
        :detailData="detailData"
        :pkid="pkid"
        :type="type"
        @changeFile="changeFile"
        :isDefaultTab="isDefaultTab"
        :canDaoChu="canDaoChu"
      ></preliminaryProcedure>
      <!-- 项目实施 -->
      <projectImply
        v-if="currentTab === 3 && isShow"
        :detailData="detailData"
        :pkid="pkid"
        :type="type"
        @changeFile="changeFile"
        :isDefaultTab="isDefaultTab"
        :canDaoChu="canDaoChu"
      ></projectImply>
      <!-- 项目结算、决算 -->
      <projectSettlement
        v-if="currentTab === 4 && isShow"
        :detailData="detailData"
        :pkid="pkid"
        :type="type"
        @changeFile="changeFile"
        :isDefaultTab="isDefaultTab"
        :canDaoChu="canDaoChu"
      ></projectSettlement>
    </div>

    <!-- <recordHistory
      :detailData="detailData"
      :pkid="pkid"
      :status="status"
      :defaultIndex="defaultIndex"
      :currentTab="currentTab"
    /> -->
    <!-- 保存 -->
    <div class="bottom_box">
      <div class="box_left">
        <div
          class="sh"
          :class="
            detailData.projectRecordCheckPoList &&
            detailData.projectRecordCheckPoList[0]
              ? ''
              : 'shenheDisabled'
          "
          @click="handleShenHe"
        >
          审核记录
        </div>
        <div
          class="box_left"
          v-if="
            detailData.projectRecordCheckPoList &&
            detailData.projectRecordCheckPoList[0]
          "
        >
          <div class="shTime">
            审核时间：{{
              detailData.projectRecordCheckPoList[0]
                ? detailData.projectRecordCheckPoList[0]
                    .checkTime
                : '无审核记录'
            }}
          </div>
          <div class="shTime">
            审核结果：<span
              style="
                /* color: #f9801c; */
                font-size: 14px;
                font-weight: 400;
              "
              :class="
                detailData.projectRecordCheckPoList[0]
                  .checkStatus == 2
                  ? 'success'
                  : 'fail'
              "
              >{{
                detailData.projectRecordCheckPoList[0]
                  ? detailData.projectRecordCheckPoList[0]
                      .checkStatus == 2
                    ? '通过'
                    : '退回'
                  : '无审核记录'
              }}</span
            >
          </div>
          <div class="shTime">
            审核意见：<span
              class="yijian"
              style="font-size: 14px; font-weight: 400"
            >
              {{
                detailData.projectRecordCheckPoList[0]
                  ? detailData.projectRecordCheckPoList[0]
                      .checkOpinion
                  : '无审核记录'
              }}</span
            >
          </div>
        </div>
      </div>
      <div
        class="box_right"
        v-if="
          status !== '1' &&
          currentTab == Number(defaultIndex) &&
          type !== 'detail'
        "
      >
        <div
          class="sh save"
          @click="saveFileContent(detailData)"
        >
          保存
        </div>
        <div class="sh" @click="sumbit()">提交</div>
      </div>
      <div
        class="box_right"
        v-if="
          status == '1' &&
          currentTab == Number(defaultIndex) &&
          userRoleAdmin &&
          type == 'shenhe'
        "
      >
        <div
          class="sh"
          @click="clickShenhe()"
          v-if="userRoleAdmin"
        >
          审核
        </div>
      </div>
    </div>
    <!-- 审核记录 -->
    <!-- <shenheHistory
      :isShowHistory="isShowHistory"
      :detailData="detailData"
      @changShowDialog="
        () => {
          isShowHistory = false
        }
      "
    ></shenheHistory> -->
    <shenheHistory
      ref="test"
      :data="detailData.projectRecordCheckPoList"
      user="checkUserName"
    ></shenheHistory>
    <shenhe ref="shenheDialog"></shenhe>
  </div>
</template>
<style scoped lang="scss">
.form-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .table-content {
    flex: 1 1 auto;
    overflow: auto;
  }
  .step-tab {
    width: 100%;
  }
}
.bottom_box {
  width: 100%;
  height: 78px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 2px;
  // position: fixed;
  bottom: 0;
  z-index: 1000;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 29px 0 29px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex: 0 0 auto;
  .sh {
    width: 90px;
    height: 32px;
    background: #497fa3;
    border-radius: 2px;
    font-weight: 400;
    color: #ffffff;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    margin-left: 20px;
  }
  .shenheDisabled {
    cursor: default;
    background: rgb(245, 245, 245);
    color: rgb(176, 176, 176);
  }
  .save {
    background-color: #ffffff;
    border: 1px solid #497fa3;
    color: #497fa3;
  }
  .box_left {
    display: flex;
    justify-content: flex-start;
    .shTime {
      // align-items: center;
      display: flex;
      align-items: center;
      margin-left: 20px;
      .yijian {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 500px;
      }
    }
  }
  .box_right {
    display: flex;
    // justify-content: flex-end;
  }
}
.success {
  color: #00ca6d;
}
.fail {
  color: #f9801c;
}
::v-deep {
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>
